<template>
  <div>
  <app-card>
    <template>
      <div class="top">
        <div class="t-left">
          <span style="font-size: 13px; color: pink; font-weight: 400">说明：目前支持学科和关键字条件筛选</span>
          <el-button @click="$router.push('/questions/new')" type="success" icon="el-icon-edit" style="margin-right: 10px">新增试题</el-button>
        </div>
        <el-form ref="form" label-width="100px" label-position="right">
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="学科">
                    <el-select @change="onAllSub" v-model="form.subjectID" placeholder="请选择">
                      <el-option
                        v-for="item in subject"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="二级目录">
                    <el-select v-model="form.catalogID" placeholder="请选择">
                      <el-option
                        v-for="item in catalog"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="标签">
                    <el-select v-model="form.tags" placeholder="请选择">
                      <el-option
                        v-for="item in tags"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="关键字">
                    <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
           </el-row>
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="试题类型">
                    <el-select v-model="form.questionType" placeholder="请选择">
                      <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="难度">
                    <el-select v-model="form.difficulty" placeholder="请选择">
                      <el-option
                        v-for="item in difficultyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="方向">
                    <el-select v-model="form.direction" placeholder="请选择">
                      <el-option
                        v-for="item in directionList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="录入人">
                    <el-select v-model="form.creatorID" placeholder="请选择">
                      <el-option
                        v-for="item in userList"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
           </el-row>
           <el-row type="flex" justify="space-around">
             <el-col :span="6">
                <el-form-item label="题目备注">
                    <el-input v-model="form.remarks" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="企业简称">
                    <el-input v-model="form.shortName" placeholder="根据题干搜索"></el-input>
                </el-form-item>
             </el-col>
             <el-col :span="6">
                <el-form-item label="城市">
                    <el-select @change="onCityChange" v-model="form.city" class="select-row" style="margin-right: 10px" placeholder="请选择">
                      <el-option
                        v-for="item in cityList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.province" class="select-row" placeholder="请选择">
                     <el-option
                        v-for="item in provinceList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="6" style="text-align: right">
                <el-button size="small" @click="delBtn">清除</el-button>
                <el-button size="small" type="primary" style="margin-right: 10px" @click="onSearch">搜索</el-button>
             </el-col>
           </el-row>
        </el-form>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0">
          <el-alert
            :title="'一共' + total + '条数据'"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty === '1'">单选</span>
              <span v-else-if="row.difficulty === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            width="200px"
            label="题干">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间">
            <template slot-scope="{ row }">
              {{ row.addDate | date }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="170px"
            label="难度">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          width="170px"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="chkState"
          width="170px"
          label="审核状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待审核</span>
            <span v-else-if="row.chkState === 1">通过</span>
            <span v-else-if="row.chkState === 2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          width="170px"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          width="170px"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="publishState"
          width="170px"
          label="发布状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待发布</span>
            <span v-if="row.publishState === 1 && row.chkState === 1">已发布</span>
            <span v-if="row.publishState === 0 && row.chkState === 1">已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="195px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onView(row)">预览</el-button>
            <el-button type="text" @click="onCheck(row.id)" :disabled="row.chkState === 1 || row.chkState === 2">审核</el-button>
            <el-button type="text" @click="$router.push('/questions/new?id=' + row.id)" :disabled="row.publishState === 1">修改</el-button>
            <el-button type="text" @click="publish(row)">{{ row.publishState === 1 ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="onDelete(row)" :disabled="row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="1">
          <el-alert
            :title="'一共' + total + '条数据'"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty === '1'">单选</span>
              <span v-else-if="row.difficulty === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            width="200px"
            label="题干">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间">
            <template slot-scope="{ row }">
              {{ row.addDate | date }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="170px"
            label="难度">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          width="170px"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="chkState"
          width="170px"
          label="审核状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待审核</span>
            <span v-else-if="row.chkState === 1">通过</span>
            <span v-else-if="row.chkState === 2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          width="170px"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          width="170px"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="publishState"
          width="170px"
          label="发布状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待发布</span>
            <span v-if="row.publishState === 1 && row.chkState === 1">已发布</span>
            <span v-if="row.publishState === 0 && row.chkState === 1">已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="195px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onView(row)">预览</el-button>
            <el-button type="text" @click="onCheck(row.id)" :disabled="row.chkState === 1 || row.chkState === 2">审核</el-button>
            <el-button type="text" @click="$router.push('/questions/new?id=' + row.id)" :disabled="row.publishState === 1">修改</el-button>
            <el-button type="text" @click="publish(row)">{{ row.publishState === 1 ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="onDelete(row)" :disabled="row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="2">
          <el-alert
            :title="'一共' + total + '条数据'"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty === '1'">单选</span>
              <span v-else-if="row.difficulty === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            width="200px"
            label="题干">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间">
            <template slot-scope="{ row }">
              {{ row.addDate | date }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="170px"
            label="难度">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          width="170px"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="chkState"
          width="170px"
          label="审核状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待审核</span>
            <span v-else-if="row.chkState === 1">通过</span>
            <span v-else-if="row.chkState === 2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          width="170px"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          width="170px"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="publishState"
          width="170px"
          label="发布状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待发布</span>
            <span v-if="row.publishState === 1 && row.chkState === 1">已发布</span>
            <span v-if="row.publishState === 0 && row.chkState === 1">已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="195px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onView(row)">预览</el-button>
            <el-button type="text" @click="onCheck(row.id)" :disabled="row.chkState === 1 || row.chkState === 2">审核</el-button>
            <el-button type="text" @click="$router.push('/questions/new?id=' + row.id)" :disabled="row.publishState === 1">修改</el-button>
            <el-button type="text" @click="publish(row)">{{ row.publishState === 1 ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="onDelete(row)" :disabled="row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="3">
          <el-alert
            :title="'一共' + total + '条数据'"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科">
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型">
            <template slot-scope="{ row }">
              <span v-if="row.difficulty === '1'">单选</span>
              <span v-else-if="row.difficulty === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            width="200px"
            label="题干">
            <template slot-scope="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间">
            <template slot-scope="{ row }">
              {{ row.addDate | date }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="170px"
            label="难度">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          width="170px"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="chkState"
          width="170px"
          label="审核状态">
          <template slot-scope="{ row }">
            <span v-if="row.chkState === 0">待审核</span>
            <span v-else-if="row.chkState === 1">通过</span>
            <span v-else-if="row.chkState === 2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          width="170px"
          label="审核意见">
        </el-table-column>
        <el-table-column
          prop="chkUser"
          width="170px"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="publishState"
          width="170px"
          label="发布状态">
          <template slot-scope="{ row }">
            <span v-if="row.publishState === 0">待发布</span>
            <span v-else-if="row.publishState === 1">已发布</span>
            <span v-else-if="row.publishState === 2">已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="195px">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onView(row)">预览</el-button>
            <el-button type="text" @click="onCheck(row.id)" :disabled="row.chkState === 1 || row.chkState === 2">审核</el-button>
            <el-button type="text" @click="$router.push('/questions/new?id=' + row.id)" :disabled="row.publishState === 1">修改</el-button>
            <el-button type="text" @click="publish(row)">{{ row.publishState === 1 ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="onDelete(row)" :disabled="row.publishState === 1">删除</el-button>
          </template>
        </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 10px; text-align: right">
      </el-pagination>

    </template>
  </app-card>
  <questions-preview v-if="view" :id="id" @yt="view = false" v-model="view" />
  <questions-check v-if="check" :id="id" @checkSuccess="checkSuccess" @delCheck="check = false" v-model="check" />
  </div>
</template>

<script>
import AppCard from '@/components/AppCard'
import * as QuesApi from '@/api/hmmm/questions'
import * as SubApi from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/directorys'
import { tagsSimple } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { userSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import dayjs from 'dayjs'
import QuestionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
import { Message } from 'element-ui'
export default {
  name: 'BasicQuestions',

  components: {
    AppCard,
    QuestionsPreview,
    QuestionsCheck
  },

  data () {
    return {
      id: null,
      view: false,
      check: false,
      tableData: [],
      total: null,
      activeName: '0',
      form: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录，
        chkState: null // 审核状态
      },
      subject: [], // 学科列表
      catalog: [], // 二级菜单
      tags: [],
      userList: [], // 录入人
      cityList: [], // 城市
      provinceList: [] // 省份
    }
  },

  methods: {
    text (row) {
      console.log(row)
    },
    // 获取题目列表
    async getQuestionList () {
      const res = await QuesApi.choice(this.form)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 获得录入人列表
    async getUserList () {
      const res = await userSimple()
      this.userList = res.data
    },

    // 每页条数改变时触发
    async handleSizeChange (val) {
      this.form.pagesize = val
      const res = await QuesApi.choice(this.form)
      this.tableData = res.data.items
    },

    // 页码改变时触发
    async handleCurrentChange (val) {
      this.form.page = val
      const res = await QuesApi.choice(this.form)
      this.tableData = res.data.items
    },

    // 获得学科列表
    async getObjectList () {
      const res = await SubApi.simple()
      this.subject = res.data
    },

    // 学科发生改变时触发
    async onAllSub () {
      this.form.catalogID = null
      const directorysRes = await simple(this.form.subjectID)
      this.catalog = directorysRes.data
      const tagsRes = await tagsSimple(this.form.subjectID)
      this.tags = tagsRes.data
    },

    // 城市列表
    AllCitys () {
      this.cityList = provinces()
    },

    // 城市选中框发生变化
    onCityChange (val) {
      this.form.province = ''
      this.provinceList = citys(val)
    },

    // 清除按钮
    delBtn () {
      this.form = {
        subjectID: null, // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      }
    },

    // 搜索按钮
    async onSearch () {
      const res = await QuesApi.choice(this.form)
      this.tableData = res.data.items
    },

    // 试题预览
    onView (row) {
      this.id = row.id
      this.view = true
    },

    // 试题审核
    onCheck (id) {
      this.id = id
      this.check = true
    },

    // 删除题目
    onDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await QuesApi.remove({
          id: row.id
        })
        Message({
          type: 'success',
          message: '删除成功'
        })
        await this.getQuestionList()
      }).catch(() => {
      })
    },

    // tab栏切换
    handleClick (tab) {
      if (tab.index === '1') {
        this.form.chkState = 0
        this.getQuestionList()
      } else if (tab.index === '2') {
        this.form.chkState = 1
        this.getQuestionList()
      } else if (tab.index === '3') {
        this.form.chkState = 2
        this.getQuestionList()
      } else {
        this.form.chkState = null
        this.getQuestionList()
      }
    },

    // 审核成功后续
    checkSuccess () {
      this.check = false
      this.form.chkState = null
      this.getQuestionList()
    },

    // 题目上下架
    async publish (row) {
      if (row.publishState === 1) {
        this.$confirm('确定下架该题目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await QuesApi.choicePublish({
            id: row.id,
            publishState: 0
          })
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
          await this.getQuestionList()
        }).catch(() => {})
      } else {
        this.$confirm('确定上架该题目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await QuesApi.choicePublish({
            id: row.id,
            publishState: 1
          })
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
          await this.getQuestionList()
        }).catch(() => {})
      }
    }
  },

  created () {
    this.getQuestionList()
    this.getObjectList()
    this.getUserList()
    this.AllCitys()
  },

  filters: {
    date (val) {
      return dayjs(dayjs(val).$d).format('YYYY-MM-DD HH:mm:ss')
    }
  },

  computed: {
    difficultyList () {
      return difficulty
    },

    typeList () {
      return questionType
    },

    directionList () {
      return direction
    }
  }
}
</script>

<style scoped lang='scss'>
.top {
  .t-left {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .el-select {
    width: 300px;
  }

  .el-input {
    width: 300px;
  }

  .select-row {
    width: 145px;
  }
}

.el-button+.el-button {
  margin-left: 5px;
}
</style>
